<template>
	<view class="loginBox" :style="'background-image: url(' +loginImg+');background-size: 100% 100%'">
		<!-- 		<image class="loginBox-bg" src="http://qiniu.suboshimuying.cn/static/login/editBg.png" mode=""></image>
		<image class="loginBox-top" src="http://qiniu.suboshimuying.cn/static/login/image 71@2x.png" mode=""></image> -->
		<view class="loginBox-main">
			<!-- 		<view class="row1">
				欢迎进入
			</view>
			<view class="row2">
				米夸商城
			</view>
			<view class="teb">
				年轻人第一辆ebike
			</view> -->





			<view style="position: absolute;top: 55%;left: 50%;transform: translateX(-50%);">
				<button v-if="isCheckLoginState" class="btn" open-type="getPhoneNumber"
					@getphonenumber="decryptPhoneNumber"
					style="padding: unset;border-style: none;background: transparent;">
					<image :src="btnImg" mode=""></image>
				</button>
				<view class="btn" v-else @click="noLoginStateHandler">
					<image :src="btnImg" mode=""></image>
				</view>
				<view class="check"
					style="text-align: center;color: #333333;margin-top: 20rpx;display: flex; align-items: center; justify-content: center;">
					<image style="width: 26rpx;height: 26rpx;margin-right: 10rpx;"
						:src=" isCheckLoginState ?  'http://qiniu.suboshimuying.cn/static/cart/check.png' : 'http://qiniu.suboshimuying.cn/static/order/icon24@2x.png'"
						@click="isCheckLoginState = !isCheckLoginState"></image>
					已阅读并同意
					<text style="color: #000;font-weight: bold;"
						@click="toUrl('/subPages/agreement/agreement?type=3')">《服务协议》</text>
					和
					<text style="color: #000;font-weight: bold;"
						@click="toUrl('/subPages/agreement/agreement?type=2')">《隐私协议》</text>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import qqmapsdk from '@/js_sdk/qqmap-wx-jssdk.min.js'
	import {
		mapKey
	} from '@/utils/global.js'
	var QQMapWX = new qqmapsdk({
		key: mapKey, //腾讯地图key
		// https://apis.map.qq.com 微信配置请求地址
	});
	export default {
		data() {
			return {
				pid: null,
				flag: false, //用户地址是否授权
				address: "", //当前详细地址
				isCheckLoginState: false, // 是否同意登录
				loginImg: '',
				btnImg: ''
			};
		},
		async onLoad(option) {
			this.judgeLocation()
			let res6 = await this.$api.Geticon({
				type: 'loginimg'
			})
			console.log(res6.data[0].image);
			let res3 = await this.$api.Geticon({
				type: 'btnimge'
			})
			this.btnImg = res3.data[0].image
			console.log(res3);
			this.loginImg = res6.data[0].image
			if (uni.getStorageSync('pid')) {
				this.pid = uni.getStorageSync('pid')
			}




			// this.judgeLocation()


		},
		methods: {
			// 跳转
			toUrl(url) {
				uni.navigateTo({
					url
				})
			},
			// 手机号授权登陆
			decryptPhoneNumber(e) {
				// console.log(e);
				if (e.detail.encryptedData) {
					//授权成功
					if (this.flag) {
						//进行登陆
						this.loginFun(e)
					} else {
						this.judgeLocation()
					}

				} else {
					uni.$u.toast('已拒绝授权');
				}
			},
			noLoginStateHandler() {
				if (!this.isCheckLoginState) return uni.showToast({
					title: '请先同意服务协议和隐私协议',
					icon: 'none'
				})
			},
			loginFun(e) {
				uni.login({
					provider: 'weixin',
					success: async res => {
						// console.log(res.code);
						//登陆接口
						let {
							code,
							data,
							msg
						} = await this.$api.login({
							code: res.code,
							encryptedData: e.detail.encryptedData,
							iv: e.detail.iv,
							pid: this.pid,
							address: this.address
						});
						this.$u.toast(msg)
						if (code === 1) {
							//保存token
							uni.setStorageSync('token', data.token)
							// 保存分享ID ===用户ID
							uni.setStorageSync('userId', data.id)

							setTimeout(() => {
								const eventChannel = this.getOpenerEventChannel();
								eventChannel.emit('getLocation', true);
								uni.navigateBack()
							}, 1500)
						}
					}
				});
			},
			//判断是否授权 
			judgeLocation() {
				let that = this
				uni.getSetting({
					success: (res) => {
						console.log(res);
						if (!res.authSetting['scope.userLocation']) {
							uni.authorize({
								scope: 'scope.userLocation',
								success: () => {
									//点击允许后--就一直会进入成功授权的回调 就可以使用获取的方法了
									console.log('同意授权')
									// 获取当前地址
									this.getAddress()
								},
								fail(error) {
									//点击了拒绝授权后--就一直会进入失败回调函数--此时就可以在这里重新拉起授权窗口
									console.log('拒绝授权', error)

									uni.showModal({
										title: '提示',
										content: '若点击不授权，将无法使用位置功能',
										cancelText: '不授权',
										cancelColor: '#999',
										confirmText: '授权',
										confirmColor: '#f94218',
										success: (res) => {
											if (res.confirm) {
												// 选择弹框内授权
												uni.openSetting({
													success: (res) => {
														if (res.authSetting[
																'scope.userLocation'
															]) {
															uni.$u.toast(
																'授权成功，请重新登录'
															);
															// 获取当前地址
															that.getAddress()

															wx.navigateTo({
																url: '/pages/index/index'
															})
														}
													}
												})
											} else if (res.cancel) {
												// 选择弹框内 不授权
												console.log('用户点击不授权')
												this.flag = false
											}
										}
									})
								}
							})
						} else {
							// 获取当前地址
							this.getAddress()
						}
					}
				})
			},
			// 获取当前详细地址
			getAddress() {
				this.flag = true
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: (res) => {
						console.log(res);
						//逆地址解析  坐标转地址信息
						QQMapWX.reverseGeocoder({
							//Object格式
							location: {
								latitude: res.latitude,
								longitude: res.longitude
							},
							success: (res) => {
								console.log(res);
								//成功后的回调
								const mapdata = res.result.ad_info;
								// province省份
								// city城市
								// district区县
								// address详细地址
								this.address = mapdata.province + '-' + mapdata.city + '-' +
									mapdata.district + '-' + res.result.address
								// that.form.area = mapdata.province + '-' + mapdata.city + '-' +
								// 	mapdata.district;
								// that.form.address = res.result.address
								// that.city = mapdata.city;
								// console.log(res);
							},
							fail: function(error) {},
							complete: function(res) {
								//console.log(res);
							}
						});

					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.loginBox {
		width: 100%;
		height: 100vh;
	}

	.btn {

		width: 450rpx;
		height: 70rpx;

		border-radius: 100rpx;
		opacity: 1;
		overflow: hidden;
		text-align: center;
		color: #fff;
		font-size: 32rpx;

		image {
			width: 100%;
			height: 100%;
			// margin-right: 8rpx;
			// vertical-align: middle;
		}
	}

	.check {

		width: 100%;
		font-size: 18rpx;
	}
</style>